/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
   Embed, Text,
} from "customize-easy-ui-component";
import {FadeImage} from "../../comp/FadeImage";
import Img_Ma from "../../images/MA.png";
import Img_Fbpi from "../../images/FBPI.png";

/**报告封面的头部区域： 紧凑型; 没有二维码的。
 * @param nMa:去掉 MA ;
 * */
export const ReportFirstPageHeadCyMa= ({theme , rep, mbbm,nMa,nFBp } :{theme: any, rep:any, mbbm:string,nMa?:boolean,nFBp?:boolean}
) => {
  // const atPrint = useMedia('print');
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '5rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        {!nMa &&
            <Embed css={{width: "155px",margin: "auto",top: '-0.65rem'}} width={78} height={35}>
              <FadeImage src={Img_Ma}/>
            </Embed>
        }
        <Text  css={{position: 'relative',top: '-1.1rem',fontSize:'0.9rem'}}>181320110160</Text>
      </div>
      <div css={{overflow: 'hidden'}}>
        <Text variant="h6" css={{fontSize:'0.8rem'}}>{mbbm}</Text>
        {!nFBp &&
            <Embed css={{width: "120px",margin: "auto",top: '-0.65rem'}} width={78} height={35}>
              <FadeImage src={Img_Fbpi}/>
            </Embed>
        }
      </div>
    </div>
  </React.Fragment>;
};

/**没有MA标记的 简化；承压内；
* */
export const ReportFirstPageHeadCyNmaNQR= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '5rem',
    }}>
      <div css={{overflow: 'hidden'}}>
      </div>
      <div css={{overflow: 'hidden'}}>
        <Text variant="h6" css={{fontSize:'0.8rem',lineHeight:1.2}}>{mbbm}</Text>
        <Embed css={{width: "120px",margin: "auto",top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
      </div>
    </div>
  </React.Fragment>;
};
